<template>
  <div>
    <BasicModal
      width="80%"
      v-bind="$attrs"
      @register="registerModal"
      :title="getTitle"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #area="{ field }">
          <div v-for="(item, index) in areaList" :key="index">
            <div class="button-box">
              <Input size="small" v-model:value="areaList[index]" placeholder="请输入区域" />
              <a-button color="error" type="link" class="ml-2" @click="getDelete(index, 1)">
                删除
              </a-button>
            </div>
          </div>
          <Button @click="add(1)">+ 添加区域</Button>
        </template>
        <template #school="{ field }">
          <div v-for="(item, index) in schoolList" :key="index">
            <!-- <input v-model="schoolList[index]" placeholder="请输入学校" /> -->
            <div class="button-box">
              <Input size="small" v-model:value="schoolList[index]" placeholder="请输入学校" />
              <a-button color="error" type="link" class="ml-2" @click="getDelete(index, 2)">
                删除
              </a-button>
            </div>
          </div>
          <Button @click="add(2)">+ 添加学校</Button>
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, h } from 'vue';
  import { Input } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { DetailsApi, UpdateApi, AddApi, UploadApi } from '/@/api/setCenter/cityManagement';
  import { useComponentRegister } from '/@/components/Form';
  import { listToTree } from '/@/utils/helper/treeHelper';
  import { FormSchema } from '/@/components/Table';
  import { Tinymce } from '/@/components/Tinymce/index';
  import { getAppEnvConfig } from '/@/utils/env';
  useComponentRegister('Tinymce', Tinymce);
  export const formSchema: FormSchema[] = [
    {
      label: 'cityId',
      field: 'cityId',
      component: 'Input',
      show: false,
    },
    {
      field: 'city',
      label: '城市:',
      component: 'Input',
      required: true,
    },
    {
      field: 'cityEn',
      label: '城市英文缩写:',
      component: 'Input',
      required: true,
    },
    {
      field: 'area',
      label: '区域:',
      component: 'Input',
      slot: 'area',
    },
    {
      field: 'school',
      label: '学校:',
      component: 'Input',
      slot: 'school',
    },
    {
      label: 'chuzuId',
      field: 'chuzuId',
      component: 'Input',
      show: false,
    },
    {
      label: 'ershouId',
      field: 'ershouId',
      component: 'Input',
      show: false,
    },
    {
      label: 'liuxueshenId',
      field: 'liuxueshenId',
      component: 'Input',
      show: false,
    },
    {
      label: 'liuxueshenkaId',
      field: 'liuxueshenkaId',
      component: 'Input',
      show: false,
    },
    {
      label: 'chushouId',
      field: 'chushouId',
      component: 'Input',
      show: false,
    },
    {
      label: 'huodoongId',
      field: 'huodoongId',
      component: 'Input',
      show: false,
    },
    {
      field: 'chuzu',
      label: '出租房源',
      component: 'Select',
      defaultValue: 0,
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'chuzuSort',
      label: '出租房源排序',
      defaultValue: 0,
      component: 'Input',
    },
    {
      field: 'ershou',
      label: '二手商品',
      defaultValue: 0,
      component: 'Select',
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'ershouSort',
      label: '二手商品排序',
      defaultValue: 0,
      component: 'Input',
    },
    {
      field: 'liuxueshen',
      label: '留学生课堂',
      defaultValue: 0,
      component: 'Select',
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'liuxueshenSort',
      label: '留学生课堂排序',
      defaultValue: 0,
      component: 'Input',
    },
    {
      field: 'liuxueshenka',
      label: '留学生卡商家',
      defaultValue: 0,
      component: 'Select',
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'liuxueshenkaSort',
      label: '留学生卡商家排序',
      defaultValue: 0,
      component: 'Input',
    },
    {
      field: 'chushou',
      label: '出售房源',
      defaultValue: 0,
      component: 'Select',
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'chushouSort',
      label: '出售房源排序',
      defaultValue: 0,
      component: 'Input',
    },
    {
      field: 'huodoong',
      label: '热门活动',
      defaultValue: 0,
      component: 'Select',
      componentProps: {
        options: [
          { label: '隐藏', value: 0 },
          { label: '显示', value: 1 },
        ],
      },
    },
    {
      field: 'huodoongSort',
      label: '热门活动排序',
      defaultValue: 0,
      component: 'Input',
    },
  ];
  export default defineComponent({
    name: 'MenuModal',
    components: { BasicModal, BasicForm, Input },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);
      const areaList = ref<string[]>([]);
      const schoolList = ref<string[]>([]);
      const cityManagerServiceModule = ref<string[]>([]);
      const [
        registerForm,
        { appendSchemaByField, resetFields, setFieldsValue, updateSchema, validate },
      ] = useForm({
        labelWidth: 160,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { lg: 12, md: 24 },
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data.record, '编辑内容');
        areaList.value = [];
        schoolList.value = [];
        resetFields();
        isUpdate.value = !!data?.isUpdate;

        if (data.record.id) {
          const treeData = await queryList(data.record.id);
          console.log(treeData, '详情');
          // setFieldsValue({
          //   ...data.record,
          // });
          areaList.value = [...treeData.area];
          schoolList.value = [...treeData.school];
          cityManagerServiceModule.value = [...treeData.cityManagerServiceModule];
          cityManagerServiceModule.value.map((item: any) => {
            if (item.serviceName == '出租房源') {
              treeData.chuzu = item.status;
              treeData.chuzuSort = item.sort;
              treeData.chuzuId = item.id;
            } else if (item.serviceName == '二手商品') {
              treeData.ershou = item.status;
              treeData.ershouSort = item.sort;
              treeData.ershouId = item.id;
            } else if (item.serviceName == '留学生课堂') {
              treeData.liuxueshen = item.status;
              treeData.liuxueshenSort = item.sort;
              treeData.liuxueshenId = item.id;
            } else if (item.serviceName == '留学生卡商家') {
              treeData.liuxueshenka = item.status;
              treeData.liuxueshenkaSort = item.sort;
              treeData.liuxueshenkaId = item.id;
            } else if (item.serviceName == '出售房源') {
              treeData.chushou = item.status;
              treeData.chushouSort = item?.sort;
              treeData.chushouId = item.id;
            } else if (item.serviceName == '热门活动') {
              treeData.huodoong = item.status;
              treeData.huodoongSort = item?.sort;
              treeData.huodoongId = item.id;
            }
          });
          setFieldsValue({
            ...treeData,
          });
          console.log(treeData, 111111111);
          updateSchema({
            field: 'parentId',
            componentProps: {
              treeData,
            },
          });
        }
      });

      async function queryList(ids) {
        const data = await DetailsApi(ids);
        if (data.data) {
          console.log(data.data);

          return data.data;
        }
        return [];
      }
      function add(index) {
        if (index == 1) {
          areaList.value.push('');
        } else if (index == 2) {
          schoolList.value.push('');
        }
      }

      function getDelete(index, a) {
        // 删除
        if (a == 1) {
          areaList.value.splice(index, 1);
        } else if (a == 2) {
          schoolList.value.splice(index, 1);
        }
      }
      const getTitle = computed(() => (!unref(isUpdate) ? '新增城市' : '编辑城市'));

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });
          const values = await validate();
          values.area = [...new Set(areaList.value)];
          values.school = [...new Set(schoolList.value)];
          values.school.map((item, index) => {
            if (item == '') {
              console.log(11111);
              values.school.splice(index, 1);
            }
          });
          values.area.map((item, index) => {
            if (item == '') {
              console.log(11111);
              values.area.splice(index, 1);
            }
          });
          values.cityManagerServiceModule = [
            {
              cityId: values.cityId,
              id: values.chuzuId,
              serviceName: '出租房源',
              sort: values.chuzuSort,
              status: values.chuzu,
              serviceId: 1,
            },
            {
              cityId: values.cityId,
              id: values.ershouId,
              serviceName: '二手商品',
              sort: values.ershouSort,
              status: values.ershou,
              serviceId: 2,
            },
            {
              cityId: values.cityId,
              id: values.liuxueshenId,
              serviceName: '留学生课堂',
              sort: values.liuxueshenSort,
              status: values.liuxueshen,
              serviceId: 3,
            },
            {
              cityId: values.cityId,
              id: values.liuxueshenkaId,
              serviceName: '留学生卡商家',
              sort: values.liuxueshenkaSort,
              status: values.liuxueshenka,
              serviceId: 6,
            },
            {
              cityId: values.cityId,
              id: values.chushouId,
              serviceName: '出售房源',
              sort: values.chushouSort,
              status: values.chushou,
              serviceId: 4,
            },
            {
              cityId: values.cityId,
              id: values.huodoongId,
              serviceName: '热门活动',
              sort: values.huodoongSort,
              status: values.huodoong,
              serviceId: 5,
            },
          ];
          console.log(values, '验证');
          if (values.cityId > 0) {
            await UpdateApi(values);
          } else {
            await AddApi(values);
          }
          console.log(values);
          closeModal();
          emit('success');
        } catch (err) {
          console.log(err);
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        registerModal,
        registerForm,
        getTitle,
        areaList,
        schoolList,
        cityManagerServiceModule,
        handleSubmit,
        add,
        getDelete,
      };
    },
  });
</script>
<style lang="less" scoped>
  .button-box {
    display: flex;
    margin: 10px 0;
  }
</style>
